<template>
    <div class="header">
      用户登录
    </div>
    <div class="login-center">
      <div class="login-one">
        手机号码：<input type="text" placeholder="手机号码" v-model="username">
      </div>
      <div class="login-two">
        密码：&nbsp;&nbsp;&nbsp;<input type="password" placeholder="密码" v-model="password">
      </div>
    </div>
    <div class="login-footer">
        <div class="footer-one" @click="login">登录</div>
        <div class="footer-two" @click="register">去注册</div>
    </div>
    <Footer></Footer>
</template>
<script>
   export default{
    name:'Login',
    data(){
      return{
        username:'',
        password:''
      }
    },
    methods:{
      login(){
        if(this.username==''){
          alert('手机号码不能为空');
          return;
        }
        if(this.password ==''){
          alert('密码不能为空');
          return;
        }
        this.$axios.post('getUserByIdByPass',this.$qs.stringify({
           userId: this.username,
           password: this.password
        })).then(response =>{
          let user = response.data;
          if(user == ''){
            alert("用户名密码不正确");
          }else{
            user.userImg = '';
            this.$setSessionStorage('user',user);
            this.$router.push("/");
          }
        })
      },
      register(){
        this.$router.push({path:'/register'});
      }
    }
   }
</script>
<style>
  .login-center{
    text-align: left;
    font-size: 30px;
    color: #666666;
    
  }
  .login-center input{
    font-size: 30px;
    border: none;
    outline: none;
    height: 50px;
    width: 500px;
    
  }
  .login-one{
    margin-bottom: 10px;
    
  }
  .login-footer{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
  }
  .footer-one{
    width: 300px;
    height: 100px;
    background-color: #38ca73;
    text-align: center;
    font-size: 50px;
    color: white;
  }
  .footer-two{
    width: 300px;
    height: 100px;
    background-color: #eeeeee;
    text-align: center;
    font-size: 50px;
    color: #666666;
    margin-top: 20px;
  }

</style>